樣式設定和 css 很類似
可以設定粗細、字級、字型....

// 文字樣式
ctx.font = '24px Arial'; 
ctx.fillStyle = '#333333';
ctx.fillText('出現在畫布上的文字', 0, 0);

文字樣式有固定順序 "[font-style] [font-variant] [font-weight] [font-size] [font-family]"
font-style 可省略。預設normal、italic
font-variant 可省略。預設normal、small-caps 小寫會改大寫、高度沿用小寫字母高
font-weight 可省略。bold、lighter...等也可以用 100-900 設定粗體、細體
font-size 預設 10px
font-family 預設 sans-serif

若是要從外部加入其他字型
就要先在 css 設定

@import url("要使用的字型");

才能在 canvas 使用

ctx.font = '24px 要使用的字型';

fillStyle 設定文字填滿顏色

ctx.fillStyle = 'red';
ctx.fillText("Text", 30, 30); 

strokeStyle 設定外框顏色

ctx.strokeStyle = 'red';
ctx.strokeText("Text", 30, 30); 

當使用填滿顏色 fillStyle 時
輸入的文字一定是 fillText
strokeStyle 也一樣
例如下圖

就不能像下方例子混用

ctx.fillStyle = 'red';
ctx.strokeText("Text", 0, 0);

而是要分開

ctx.fillStyle = 'red';
ctx.fillText("Text", 0, 0); 
ctx.strokeStyle = '#333';
ctx.strokeText("Text", 0, 0); 

作為標題的文字如果都是單一顏色也太單調
把 fillStyle(或是strokeStyle) 改成漸層色的話

var linearGrad = ctx.createLinearGradient(0,0,800,0)  
				linearGrad.addColorStop(0,"purple");
				linearGrad.addColorStop("0.5","green"); 
				linearGrad.addColorStop(1,"yellow");  

ctx.font = '700 40px Arial';
ctx.fillStyle = linearGrad;
ctx.fillText("Text", 10, 30); 

但這有個問題是
顏色要由第一個字到最後一個字所以固定起點和終點位置的漸層色
當修改內容字數時
就必需要再重新找到漸層的起點和終點

所以就可以使用 measureText(text) 取得目前要漸層的文字總寬度

var text = "Text";
var len = ctx.measureText(text).width;

漸層範例

ctx.font = '40px Arial';
var text = "Text Text Text";
var len = ctx.measureText(text).width;

var linearGrad = ctx.createLinearGradient(0,0,len,0);  
    linearGrad.addColorStop(0,"orange");
    linearGrad.addColorStop("0.5","red"); 
    linearGrad.addColorStop(1,"indigo");  

ctx.fillStyle = linearGrad;
ctx.fillText(text, 0, 0);